
/* 移动端优化样式 */
@media (max-width: 480px) {
    body {
        padding: 8px;
        font-size: 14px;
    }
    
    .container {
        width: 100%;
        border-radius: 8px;
        overflow-x: hidden;
    }
    
    header {
        padding: 15px 10px;
    }
    
    h1 {
        font-size: 20px;
    }
    
    .subtitle {
        font-size: 14px;
    }
    
    .main-content {
        flex-direction: column;
        padding: 15px 10px;
    }
    
    .input-section, .result-section {
        width: 100%;
        min-width: 100%;
        padding: 15px;
        margin-right: 0;
        margin-bottom: 15px;
        box-sizing: border-box;
    }
    
    .form-group {
        margin-bottom: 12px;
    }
    
    .radio-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .datetime-inputs {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .bazi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .bazi-column {
        padding: 10px 5px;
    }
    
    .bazi-content {
        font-size: 16px;
    }
    
    .bazi-detail {
        font-size: 12px;
    }
    
    .result-header {
        padding: 8px;
        font-size: 14px;
    }
    
    .list-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 0;
    }
    
    .result-text {
        padding: 10px;
        font-size: 13px;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }
    
    .additional-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    button {
        padding: 14px;
        font-size: 16px;
    }
    
    footer {
        padding: 10px 5px;
        font-size: 11px;
    }
    
    /* 确保所有元素不会溢出容器 */
    * {
        max-width: 100%;
    }
}

/* 针对超小屏幕设备（如iPhone SE）的额外优化 */
@media (max-width: 320px) {
    body {
        padding: 5px;
    }
    
    .bazi-grid {
        grid-template-columns: 1fr;
    }
    
    .bazi-content {
        font-size: 15px;
    }
    
    h2 {
        font-size: 18px;
    }
    
    .input-section, .result-section {
        padding: 12px 10px;
    }

    footer {
        padding: 8px 4px;
        font-size: 10px;
    }
    
    footer p {
        max-width: 95%;
        line-height: 1.7;
    }
}

/* 添加触摸友好的样式 */
@media (hover: none) and (pointer: coarse) {
    input, select, button {
        min-height: 44px; /* 提高触摸目标的可访问性 */
    }
    
    .radio-option label {
        padding: 10px 0; /* 增加单选项的触摸区域 */
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .radio-option input {
        width: 20px;
        height: 20px;
    }
}

/* 防止横向滚动 */
html, body {
    overflow-x: hidden;
}

.container {
    max-width: 100vw;
}

